<template>
  <div class="dashboard-container">
    <!-- 科技感背景 -->
    <div class="tech-background"></div>
    <div class="grid-overlay"></div>
    
    <!-- 顶部标题区域 -->
    <div class="header-section">
      <dv-decoration-8 class="decoration-left" />
      <div class="title-container">
        <div class="company-name">
          <dv-decoration-7>湖北楚宜天正消防科技有限公司</dv-decoration-7>
        </div>
        <dv-decoration-5 class="decoration-line" />
      </div>
      <dv-decoration-8 class="decoration-right" :reverse="true" />
    </div>

    <!-- 系统信息栏 -->
    <div class="system-info-bar">
      <div class="real-time-info">
        <div class="current-date">{{ currentDate }}</div>
        <div class="current-time">{{ currentTime }}</div>
      </div>
      <dv-decoration-11 class="system-title">智慧消防系统</dv-decoration-11>
      <div class="action-section">
        <el-button 
          type="primary" 
          icon="el-icon-s-platform" 
          class="enter-console-btn"
          @click="enterConsole"
        >
          进入控制台
        </el-button>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="dashboard-content">
      <!-- 左侧数据面板 -->
      <div class="data-panel">
        <dv-border-box-1>
          <div class="panel-content">
            <dv-border-box-11 title="系统概览" class="overview-section">
              <div class="stats-grid">
                <div 
                  class="stat-card" 
                  v-for="(stat, index) in stats" 
                  :key="index" 
                  :class="stat.type"
                >
                  <dv-decoration-9  class="stat-value">
                    {{ stat.value }}
                  </dv-decoration-9>
                  <div class="stat-label">
                    <i :class="stat.icon"></i>
                    {{ stat.label }}
                  </div>
                </div>
              </div>
            </dv-border-box-11>

            <dv-border-box-11 title="设备状态分布" class="chart-section">
              <div class="chart-container">
                <div id="deviceStatusChart" class="chart-content"></div>
              </div>
            </dv-border-box-11>
          </div>
        </dv-border-box-1>
      </div>
      
      <!-- 中间地图区域 -->
      <div class="map-container">
        <div id="tianditu-map" class="map-content"></div>
        <div class="map-overlay">
          <span>湖北省 · 武汉市 · 实时监控</span>
          <span class="map-stats">{{ mapPoints.length }}个监控点位 | 2,458台设备</span>
        </div>
        <div class="map-legend">
          <div class="legend-item" v-for="item in legendItems" :key="item.type">
            <span class="legend-dot" :class="item.type"></span>
            <span>{{ item.label }}</span>
          </div>
        </div>
      </div>
      
      <!-- 右侧数据面板 -->
      <div class="data-panel">
        <dv-border-box-1>
          <div class="panel-content">
            <dv-border-box-11 title="实时报警监控" class="alert-section">
              <div class="alert-scroll-container">
                <div class="alert-list">
                  <div 
                    v-for="(alert, index) in alerts" 
                    :key="index" 
                    class="alert-item" 
                    :class="alert.type"
                  >
                    <div class="alert-icon">
                      <i :class="alert.icon"></i>
                    </div>
                    <div class="alert-info">
                      <div class="alert-title">{{ alert.title }}</div>
                      <div class="alert-desc">{{ alert.desc }}</div>
                    </div>
                    <div class="alert-time">{{ alert.time }}</div>
                  </div>
                </div>
              </div>
            </dv-border-box-11>

            <dv-border-box-11 title="维护任务" class="task-section">
              <div class="task-list-static">
                <div 
                  v-for="(task, index) in tasks" 
                  :key="'task'+index" 
                  class="task-item" 
                  :class="task.status"
                >
                  <div class="task-icon">
                    <i :class="task.icon"></i>
                  </div>
                  <div class="task-info">
                    <div class="task-title">{{ task.title }}</div>
                    <div class="task-desc">{{ task.desc }}</div>
                  </div>
                  <div class="task-time">{{ task.time }}</div>
                </div>
              </div>
            </dv-border-box-11>
          </div>
        </dv-border-box-1>
      </div>
    </div>
    
    <!-- 底部状态栏 -->
    <div class="status-bar">
      <div class="status-info">
        <span class="status-indicator"></span>
        系统状态: <span class="status-normal">正常运行</span> | 
        最后数据更新: {{ lastUpdateTime }} |
        今日处理报警: {{ alerts.length }}起 |
        服务器负载: 23%
      </div>
      <div class="system-info">
        湖北楚宜天正消防科技有限公司 © 2023 智慧消防云平台 v2.0
      </div>
    </div>

    <!-- 设备信息弹窗 -->
    <el-dialog
      :visible.sync="deviceDialogVisible"
      :title="selectedDevice ? selectedDevice.name : '设备信息'"
      width="450px"
      custom-class="tech-device-dialog"
      :modal="false"
    >
      <div v-if="selectedDevice" class="device-info-tech">
        <div class="info-header">
          <i class="el-icon-monitor"></i>
          <span class="device-type">{{ selectedDevice.type }}</span>
          <span class="device-status" :class="'status-' + selectedDevice.status">
            {{ getStatusText(selectedDevice.status) }}
          </span>
        </div>
        
        <div class="info-grid">
          <div class="info-item-tech">
            <div class="info-icon">
              <i class="el-icon-location"></i>
            </div>
            <div class="info-content">
              <div class="info-label">安装位置</div>
              <div class="info-value">{{ selectedDevice.location }}</div>
            </div>
          </div>
          
          <div class="info-item-tech">
            <div class="info-icon">
              <i class="el-icon-time"></i>
            </div>
            <div class="info-content">
              <div class="info-label">最后上报</div>
              <div class="info-value">{{ selectedDevice.lastReport }}</div>
            </div>
          </div>
          
          <div class="info-item-tech">
            <div class="info-icon">
              <i class="el-icon-battery"></i>
            </div>
            <div class="info-content">
              <div class="info-label">电池电量</div>
              <div class="info-value">
                <div class="battery-level">
                  <div class="battery-fill" :style="{ width: selectedDevice.battery + '%' }"></div>
                  <span>{{ selectedDevice.battery }}%</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="info-item-tech">
            <div class="info-icon">
              <i class="el-icon-s-operation"></i>
            </div>
            <div class="info-content">
              <div class="info-label">运行状态</div>
              <div class="info-value">
                <el-tag 
                  :type="getStatusTagType(selectedDevice.status)"
                  effect="dark"
                  size="small"
                >
                  {{ getStatusText(selectedDevice.status) }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
        
        <div class="action-buttons">
          <el-button type="primary" size="small" icon="el-icon-view">
            查看详情
          </el-button>
          <el-button type="warning" size="small" icon="el-icon-edit">
            编辑设备
          </el-button>
          <el-button type="danger" size="small" icon="el-icon-warning">
            处理报警
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import './home.scss'

export default {
  name: 'home',
  data() {
    return {
      currentDate: '',
      currentTime: '',
      lastUpdateTime: this.formatTime(new Date()),
      deviceDialogVisible: false,
      selectedDevice: null,
      map: null,
      stats: [
        {
          type: 'primary',
          icon: 'el-icon-office-building',
          value: '28',
          label: '项目总数',
          desc: '+5 本月新增'
        },
        {
          type: 'success',
          icon: 'el-icon-monitor',
          value: '2,458',
          label: '设备总数',
          desc: '在线率 98.7%'
        },
        {
          type: 'danger',
          icon: 'el-icon-warning',
          value: '12',
          label: '今日报警',
          desc: '-3 较昨日'
        },
        {
          type: 'warning',
          icon: 'el-icon-s-order',
          value: '8',
          label: '待处理任务',
          desc: '3 紧急任务'
        }
      ],
      legendItems: [
        { type: 'normal', label: '正常设备' },
        { type: 'warning', label: '报警设备' },
        { type: 'danger', label: '故障设备' },
        { type: 'offline', label: '离线设备' }
      ],
      mapPoints: [
        // 光谷区域设备
        { lng: 114.305215, lat: 30.592935, name: '光谷国际广场烟感01', type: '烟感探测器', status: 'normal', location: 'B座5楼走廊', lastReport: this.getRandomTime(), battery: 85 },
        { lng: 114.302215, lat: 30.590935, name: '光谷国际广场温感01', type: '温感探测器', status: 'warning', location: 'B座5楼机房', lastReport: this.getRandomTime(), battery: 92 },
        { lng: 114.308215, lat: 30.594935, name: '光谷国际广场水泵', type: '消防水泵', status: 'danger', location: 'B座地下1层', lastReport: this.getRandomTime(), battery: 100 },
        { lng: 114.300215, lat: 30.595935, name: '光谷消防栓01', type: '消防栓', status: 'normal', location: 'A座1楼大厅', lastReport: this.getRandomTime(), battery: 95 },
        { lng: 114.303215, lat: 30.588935, name: '光谷报警按钮', type: '手动报警按钮', status: 'warning', location: 'B座3楼楼梯间', lastReport: this.getRandomTime(), battery: 60 },
        
        // 汉阳区域设备
        { lng: 114.265215, lat: 30.572935, name: '汉阳区烟感01', type: '烟感探测器', status: 'offline', location: '汉阳项目A栋3楼', lastReport: this.getRandomTime(), battery: 45 },
        { lng: 114.267215, lat: 30.574935, name: '汉阳区温感02', type: '温感探测器', status: 'normal', location: '汉阳项目B栋2楼', lastReport: this.getRandomTime(), battery: 88 },
        { lng: 114.263215, lat: 30.570935, name: '汉阳区应急灯', type: '应急照明', status: 'normal', location: '汉阳项目C栋1楼', lastReport: this.getRandomTime(), battery: 75 },
        
        // 武昌区域设备
        { lng: 114.345215, lat: 30.612935, name: '武昌区应急灯', type: '应急照明', status: 'normal', location: '武昌项目C栋2楼', lastReport: this.getRandomTime(), battery: 78 },
        { lng: 114.342215, lat: 30.610935, name: '武昌区烟感02', type: '烟感探测器', status: 'danger', location: '武昌项目A栋4楼', lastReport: this.getRandomTime(), battery: 32 },
        { lng: 114.348215, lat: 30.615935, name: '武昌区水泵', type: '消防水泵', status: 'normal', location: '武昌项目地下车库', lastReport: this.getRandomTime(), battery: 100 },
        
        // 江汉区域设备
        { lng: 114.285215, lat: 30.582935, name: '江汉区烟感03', type: '烟感探测器', status: 'warning', location: '江汉商业街1楼', lastReport: this.getRandomTime(), battery: 68 },
        { lng: 114.288215, lat: 30.585935, name: '江汉区温感03', type: '温感探测器', status: 'normal', location: '江汉商业街2楼', lastReport: this.getRandomTime(), battery: 92 },
        { lng: 114.282215, lat: 30.580935, name: '江汉区消防栓', type: '消防栓', status: 'offline', location: '江汉商业街室外', lastReport: this.getRandomTime(), battery: 25 },
        
        // 洪山区域设备
        { lng: 114.325215, lat: 30.602935, name: '洪山区烟感04', type: '烟感探测器', status: 'normal', location: '洪山科技园A座', lastReport: this.getRandomTime(), battery: 90 },
        { lng: 114.328215, lat: 30.605935, name: '洪山区温感04', type: '温感探测器', status: 'danger', location: '洪山科技园B座', lastReport: this.getRandomTime(), battery: 18 },
        { lng: 114.322215, lat: 30.600935, name: '洪山区应急灯', type: '应急照明', status: 'normal', location: '洪山科技园走廊', lastReport: this.getRandomTime(), battery: 82 }
      ],
      mapCenter: {
        lng: 114.305215,
        lat: 30.592935
      },
      mapZoom: 13,
      alerts: [
        {
          type: 'danger',
          icon: 'el-icon-fire',
          title: '火警报警',
          desc: '光谷国际广场B座5楼烟感报警，请立即处理',
          time: '14:25:36'
        },
        {
          type: 'warning',
          icon: 'el-icon-warning-outline',
          title: '设备故障',
          desc: '汉阳区消防水泵压力异常，需要检修',
          time: '13:48:22'
        },
        {
          type: 'info',
          icon: 'el-icon-info',
          title: '预警信息',
          desc: '武昌区温度异常升高，请注意监控',
          time: '12:30:15'
        },
        {
          type: 'offline',
          icon: 'el-icon-close-notification',
          title: '设备离线',
          desc: '江汉区3个烟感设备离线，请检查网络',
          time: '11:20:45'
        },
        {
          type: 'danger',
          icon: 'el-icon-fire',
          title: '紧急报警',
          desc: '东湖高新区烟雾浓度超标，请立即确认',
          time: '10:15:30'
        },
        {
          type: 'warning',
          icon: 'el-icon-warning-outline',
          title: '电池低压',
          desc: '光谷项目多个设备电池电量低于20%',
          time: '09:45:12'
        },
        {
          type: 'danger',
          icon: 'el-icon-fire',
          title: '异常报警',
          desc: '洪山科技园B座温感探测器异常',
          time: '09:30:18'
        },
        {
          type: 'warning',
          icon: 'el-icon-warning-outline',
          title: '通讯中断',
          desc: '江汉商业街消防栓通讯信号丢失',
          time: '09:15:42'
        }
      ],
      tasks: [
        {
          status: 'urgent',
          icon: 'el-icon-time',
          title: '定期检查',
          desc: '洪山区消防设施月度检查',
          time: '明日到期'
        },
        {
          status: 'normal',
          icon: 'el-icon-setting',
          title: '设备更换',
          desc: '东湖高新区烟感器更换',
          time: '3天后'
        },
        {
          status: 'completed',
          icon: 'el-icon-success',
          title: '系统维护',
          desc: '数据中心服务器维护完成',
          time: '已完成'
        },
        {
          status: 'urgent',
          icon: 'el-icon-warning',
          title: '紧急维修',
          desc: '汉阳区消防水泵紧急维修',
          time: '今天'
        }
      ],
      alertScrollInterval: null
    };
  },
  mounted() {
    this.updateDateTime();
    this.updateTimer = setInterval(this.updateDateTime, 1000);
    this.$nextTick(() => {
      this.initCharts();
      this.initTiandituMap();
      this.startAlertScroll();
    });
  },
  beforeDestroy() {
    if (this.updateTimer) clearInterval(this.updateTimer);
    if (this.deviceChart) this.deviceChart.dispose();
    if (this.alertScrollInterval) clearInterval(this.alertScrollInterval);
    if (this.map) this.map.destroy();
  },
  methods: {
    getStatusTagType(status) {
      const typeMap = {
        normal: 'success',
        warning: 'warning',
        danger: 'danger',
        offline: 'info'
      };
      return typeMap[status] || 'info';
    },

    updateDateTime() {
      const now = new Date();
      this.currentDate = this.formatDate(now);
      this.currentTime = this.formatTime(now);
    },
    
    formatDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
      const weekday = weekdays[date.getDay()];
      return `${year}年${month}月${day}日 星期${weekday}`;
    },
    
    formatTime(date) {
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${hours}:${minutes}:${seconds}`;
    },
    
    getRandomTime() {
      const hours = Math.floor(Math.random() * 24).toString().padStart(2, '0');
      const minutes = Math.floor(Math.random() * 60).toString().padStart(2, '0');
      return `2023-12-20 ${hours}:${minutes}`;
    },
    
    initCharts() {
      const chartDom = document.getElementById('deviceStatusChart');
      if (!chartDom) return;
      
      this.deviceChart = echarts.init(chartDom);
      
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: 0,
          textStyle: {
            color: '#a0b3c6',
            fontSize: 12
          }
        },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            radius: ['45%', '75%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#0a1320',
              borderWidth: 3
            },
            label: {
              show: true,
              formatter: '{b}\n{c}',
              color: '#ffffff',
              fontSize: 12,
              fontWeight: 'bold',
              lineHeight: 16
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 8
            },
            data: [
              { value: 1986, name: '正常', itemStyle: { color: '#52c41a' } },
              { value: 256, name: '报警', itemStyle: { color: '#faad14' } },
              { value: 125, name: '故障', itemStyle: { color: '#ff4d4f' } },
              { value: 91, name: '离线', itemStyle: { color: '#8c8c8c' } }
            ]
          }
        ]
      };
      
      this.deviceChart.setOption(option);
      
      window.addEventListener('resize', () => {
        this.deviceChart.resize();
      });
    },
    
    initTiandituMap() {
      // 天地图API密钥
      const tk = 'e0099a1d76f275f6c96cd22bc943a940';
      
      // 动态加载天地图API
      if (typeof T === 'undefined') {
        const script = document.createElement('script');
        script.src = `http://api.tianditu.gov.cn/api?v=4.0&tk=${tk}`;
        script.onload = () => {
          this.createTiandituMap();
        };
        document.head.appendChild(script);
      } else {
        this.createTiandituMap();
      }
    },
    
    createTiandituMap() {
      try {
        // 创建地图实例
        this.map = new T.Map('tianditu-map');
        
        // 设置中心点和缩放级别
        const center = new T.LngLat(this.mapCenter.lng, this.mapCenter.lat);
        this.map.centerAndZoom(center, this.mapZoom);
        this.map.setStyle('indigo')
        
        // 启用滚轮缩放
        this.map.enableScrollWheelZoom();
        
       
  
        
        // 添加地图标记
        this.addMapMarkers();
        
      } catch (error) {
        console.error('天地图初始化失败:', error);
        this.showMapPlaceholder();
      }
    },
    
    addMapMarkers() {
      const iconMap = {
        normal: 'http://wx.xiaofang.top/static/imgs/success.png',
        warning: 'http://wx.xiaofang.top/static/imgs/warn.png',
        danger: 'http://wx.xiaofang.top/static/imgs/danger.png',
        offline: 'http://wx.xiaofang.top/static/imgs/offline.png'
      };
      
      this.mapPoints.forEach(pointData => {
        const point = new T.LngLat(pointData.lng, pointData.lat);
        
        // 创建标记
        const marker = new T.Marker(point, {
          icon: new T.Icon({
            iconUrl: iconMap[pointData.status] || iconMap.normal,
            iconSize: new T.Point(25, 34)
          })
        });
        
        // 添加点击事件
        marker.addEventListener('click', () => {
          this.handleMarkerClick(pointData);
        });
        
        // 添加到地图
        this.map.addOverLay(marker);
      });
    },
    
    showMapPlaceholder() {
      const mapElement = document.getElementById('tianditu-map');
      if (mapElement) {
        mapElement.innerHTML = `
          <div class="map-placeholder">
            <i class="el-icon-map-location"></i>
            <div class="placeholder-title">天地图加载中...</div>
            <div class="placeholder-subtitle">${this.mapPoints.length} 个设备点位待显示</div>
          </div>
        `;
      }
    },
    
    handleMarkerClick(device) {
      this.selectedDevice = device;
      this.deviceDialogVisible = true;
    },
    
    getStatusText(status) {
      const statusMap = {
        normal: '正常',
        warning: '报警',
        danger: '故障',
        offline: '离线'
      };
      return statusMap[status] || '未知';
    },
    
    startAlertScroll() {
      const container = document.querySelector('.alert-list');
      if (!container) return;
      
      let position = 0;
      this.alertScrollInterval = setInterval(() => {
        position -= 1;
        if (Math.abs(position) > container.scrollHeight / 2) {
          position = 0;
        }
        container.style.transform = `translateY(${position}px)`;
      }, 30);
    },
    
    enterConsole() {
      this.$router.push('/customer/index');
    }
  }
};
</script>

<style scoped lang="scss">
.dashboard-container {
  position: relative;
  height: 100vh;
  background: linear-gradient(135deg, #0a1320 0%, #142850 100%);
  overflow: hidden;
}

.tech-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 80%, rgba(0, 198, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 114, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(82, 196, 26, 0.05) 0%, transparent 50%);
  z-index: 0;
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 170, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 170, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 0;
}

/* 顶部标题区域 */
.header-section {
  display: flex;
  align-items: center;
  padding-top: 10px;
  position: relative;
  z-index: 1;
}

.decoration-left,
.decoration-right {
  height: 40px;
}

.title-container {
  width: 50%;
}

.company-name {
  text-align: center;
  margin-bottom: 5px;
}

.decoration-line {
  height: 30px;
}

/* 系统信息栏 */
.system-info-bar {
  display: flex;
  color: #fff;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.real-time-info {
  text-align: center;
}

.current-date {
  font-size: 14px;
  color: #a0b3c6;
}

.current-time {
  font-size: 16px;
  font-weight: bold;
  color: #00c6ff;
  text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
}

.system-title {
  width: 600px;
  height: 55px;
  color: #1890ff;
  font-weight: bold;
}

.enter-console-btn {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0, 114, 255, 0.3);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 114, 255, 0.4);
  }
}

/* 主内容区 */
.dashboard-content {
  display: flex;
  height: calc(100vh - 140px);
  padding: 10px;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.data-panel {
  flex: 1;
  min-width: 300px;
}

.panel-content {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.overview-section,
.chart-section,
.alert-section,
.task-section {
  flex: 1;
  padding-top: 80px;
}

/* 统计卡片 */
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.stat-card {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  }
}

.stat-value {
  width: 120px;
  height: 120px;
  font-size: 15px;
}

.stat-label {
  font-size: 15px;
  color: #e0e0e0;
  margin-top: 10px;
  
  i {
    color: #00c6ff;
    margin-right: 5px;
  }
}

/* 图表容器 */
.chart-container {
  width: 100%;
  height: 100%;
}

.chart-content {
  width: 100%;
  height: 300px;
}

/* 地图容器 */
.map-container {
  flex: 2;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.map-content {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a2b47, #2a4b7c);
}

.map-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(10, 19, 32, 0.8);
  padding: 8px 15px;
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  display: flex;
  gap: 15px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 170, 255, 0.3);
}

.map-stats {
  color: #00c6ff;
  font-weight: bold;
}

.map-legend {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(10, 19, 32, 0.8);
  padding: 10px 15px;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 170, 255, 0.3);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  
  &.normal { background: #52c41a; }
  &.warning { background: #faad14; }
  &.danger { background: #ff4d4f; }
  &.offline { background: #8c8c8c; }
}

/* 报警列表 */
.alert-scroll-container {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.alert-list {
  transition: transform 0.3s ease;
}

.alert-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin: 8px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border-left: 4px solid;
  transition: all 0.3s ease;
  
  &.danger { border-left-color: #ff4d4f; }
  &.warning { border-left-color: #faad14; }
  &.info { border-left-color: #1890ff; }
  &.offline { border-left-color: #8c8c8c; }
  
  &:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
  }
}

.alert-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 15px;
  
  i {
    color: #fff;
    font-size: 16px;
  }
}

.alert-info {
  flex: 1;
}

.alert-title {
  font-weight: bold;
  color: #fff;
  margin-bottom: 4px;
}

.alert-desc {
  font-size: 12px;
  color: #a0b3c6;
}

.alert-time {
  font-size: 12px;
  color: #00c6ff;
  font-weight: bold;
}

/* 任务列表 */
.task-list-static {
  padding: 0 20px;
  height: 100%;
  overflow-y: auto;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin: 8px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all 0.3s ease;
  
  &.urgent { border-left: 4px solid #ff4d4f; }
  &.normal { border-left: 4px solid #1890ff; }
  &.completed { border-left: 4px solid #52c41a; }
  
  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

.task-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 15px;
  background: rgba(0, 198, 255, 0.2);
  
  i {
    color: #00c6ff;
    font-size: 16px;
  }
}

.task-info {
  flex: 1;
}

.task-title {
  font-weight: bold;
  color: #fff;
  margin-bottom: 4px;
}

.task-desc {
  font-size: 12px;
  color: #a0b3c6;
}

.task-time {
  font-size: 12px;
  color: #00c6ff;
  font-weight: bold;
}

/* 底部状态栏 */
.status-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(10, 19, 32, 0.9);
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #a0b3c6;
  font-size: 12px;
  border-top: 1px solid rgba(0, 170, 255, 0.2);
  z-index: 1;
  backdrop-filter: blur(5px);
}

.status-indicator {
  width: 8px;
  height: 8px;
  background: #52c41a;
  border-radius: 50%;
  margin-right: 8px;
  display: inline-block;
  animation: pulse 2s infinite;
}

.status-normal {
  color: #52c41a;
  font-weight: bold;
}

.system-info {
  color: #00c6ff;
}

/* 地图占位符 */
.map-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a2b47, #2a4b7c);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #a0b3c6;
  
  .el-icon-map-location {
    font-size: 48px;
    color: #00c6ff;
    margin-bottom: 10px;
  }
  
  .placeholder-title {
    font-size: 18px;
    margin-bottom: 5px;
  }
  
  .placeholder-subtitle {
    font-size: 12px;
    color: #00c6ff;
  }
}

/* 动画 */
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .dashboard-content {
    flex-direction: column;
    height: auto;
  }
  
  .data-panel {
    min-width: auto;
  }
  
  .map-container {
    min-height: 400px;
  }
}

/* 弹窗样式 */
::v-deep .tech-device-dialog {
  .el-dialog {
    background: linear-gradient(135deg, #0a1320 0%, #142850 100%);
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 12px;
    box-shadow: 
      0 0 30px rgba(0, 170, 255, 0.3),
      inset 0 0 20px rgba(0, 170, 255, 0.1);
  }
  
  .el-dialog__header {
    background: #13264C!important;
    border-radius: 12px 12px 0 0;
    padding: 15px 20px!important;
    border-bottom: 1px solid rgba(0, 170, 255, 0.3);
  }
  
  .el-dialog__title {
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
  
  .el-dialog__body {
    background: linear-gradient(135deg, #0a1320 0%, #142850 100%);
    padding: 20px;
    color: #ffffff;
  }
  
  .el-dialog__headerbtn {
    top: 15px;
    
    .el-dialog__close {
      color: white;
      font-size: 18px;
    }
    
    &:hover .el-dialog__close {
      color: #00c6ff;
    }
  }
}

.device-info-tech {
  color: #ffffff;
}

.info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 170, 255, 0.2);
  
  .el-icon-monitor {
    font-size: 24px;
    color: #00c6ff;
    text-shadow: 0 0 8px rgba(0, 198, 255, 0.5);
  }
  
  .device-type {
    font-weight: bold;
    color: #00c6ff;
    text-shadow: 0 0 5px rgba(0, 198, 255, 0.3);
  }
  
  .device-status {
    margin-left: auto;
    padding: 6px 16px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    &.status-normal { 
      background: linear-gradient(135deg, #52c41a, #73d13d);
      color: white;
      box-shadow: 0 0 10px rgba(82, 196, 26, 0.4);
    }
    &.status-warning { 
      background: linear-gradient(135deg, #faad14, #ffc53d);
      color: white;
      box-shadow: 0 0 10px rgba(250, 173, 20, 0.4);
    }
    &.status-danger { 
      background: linear-gradient(135deg, #ff4d4f, #ff7875);
      color: white;
      box-shadow: 0 0 10px rgba(255, 77, 79, 0.4);
    }
    &.status-offline { 
      background: linear-gradient(135deg, #8c8c8c, #bfbfbf);
      color: white;
      box-shadow: 0 0 10px rgba(140, 140, 140, 0.4);
    }
  }
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

.info-item-tech {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  background: rgba(13, 25, 42, 0.5);
  border: 1px solid rgba(0, 170, 255, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
  
  &:hover {
    border-color: rgba(0, 170, 255, 0.5);
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.2);
    transform: translateY(-2px);
  }
}

.info-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  border-radius: 8px;
  color: white;
  font-size: 16px;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.info-content {
  flex: 1;
}

.info-label {
  font-size: 12px;
  color: #a0b3c6;
  margin-bottom: 4px;
}

.info-value {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

.battery-level {
  display: flex;
  align-items: center;
  gap: 10px;
  
  .battery-fill {
    height: 8px;
    background: linear-gradient(90deg, #52c41a, #87d068);
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: 0 0 5px rgba(82, 196, 26, 0.3);
  }
  
  span {
    font-weight: bold;
    color: #00c6ff;
  }
}

.action-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 170, 255, 0.2);
}

.action-buttons .el-button {
  border: 1px solid rgba(0, 170, 255, 0.3);
  background: rgba(13, 25, 42, 0.5);
  color: #00c6ff;
  font-weight: bold;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.3);
    border-color: rgba(0, 170, 255, 0.5);
  }
}

/* 模态背景遮罩 */
::v-deep .el-dialog__wrapper {
  .v-modal {
    background: rgba(10, 19, 32, 0.8);
    backdrop-filter: blur(5px);
  }
}
</style>